<template>
  <header class="zui-header">
    <!--顶部LOGO与搜索栏-->
    <div class="top-bar">
      <!-- <div class="logo">
      </div> -->
      <!--导航菜单-->
      <ul class="menu-list">
        <li class="menu-li" v-for="(menu, id) in menuList" :key="id">
          <router-link :to="menu.action">
            <span>{{menu.text}}</span>
          </router-link>
          <ul v-if="menu.hasChild" class="sub-menu">
              <li class="sub-item" v-for="(subMenu, id) in menu.children" :key="id">
                <router-link :to="subMenu.action"></router-link>{{subMenu.text}}
              </li>
          </ul>
        </li>
      </ul>
      <ul class="menu-list" v-show="currUser">
        <li class="menu-li" v-for="(menu, id) in userMenu" :key="id">
          <router-link :to="menu.action">
            <span>{{menu.text}}</span>
          </router-link>
          <ul v-if="menu.hasChild" class="sub-menu">
              <li class="sub-item" v-for="(subMenu, id) in menu.children" :key="id">
                <router-link :to="subMenu.action"></router-link>{{subMenu.text}}
              </li>
          </ul>
        </li>
      </ul>
      <!--右侧用户-->
      <div class="user-login">
        <ul v-show="!currUser">
          <li @click="login()">登录</li>
          <li @click="reg()">注册</li>
        </ul>
        <!--登录后-->
        <ul v-if="currUser">
          <li>{{ currUser.realName }}</li>
          <li @click="logout()">退出</li>
        </ul>
      </div>
    </div>
    <!--顶部LOGO与搜索栏结束-->
    <!-- 菜单栏 -->
    <!-- <div class="h-content">
      <ul class="menu-list">
        <li class="menu-li" v-for="(menu, id) in menuList" :key="id" @click="menu.action">
          <span>{{menu.text}}</span>
          <ul v-if="menu.hasChild" class="sub-menu">
            <li class="sub-item" v-for="(subMenu, id) in menu.children" :key="id" @click="subMenu.action">{{subMenu.text}}</li>
          </ul>
        </li>
      </ul> -->
      <!-- <ul class="menu-list" v-show="currUser.userId">
        <li class="menu-li" v-for="(menu, id) in loginedMenu" :key="id" @click="menu.action">
          <span>{{menu.text}}</span>
          <ul v-if="menu.hasChild" class="sub-menu">
            <li class="sub-item" v-for="(subMenu, id) in menu.children" :key="id" @click="subMenu.action">{{subMenu.text}}</li>
          </ul>
        </li>
      </ul> -->
      <!--带下拉子菜单的导航菜单-->
      <!-- <ul class="menu-list" v-show="currUser.userId">
        <li class="menu-li" v-for="(menu, id) in loginedMenu" :key="id" @click="menu.action">
          <span>{{menu.text}}</span>
          <ul v-if="menu.hasChild" class="sub-menu">
            <li class="sub-item" v-for="(subMenu, id) in menu.children" :key="id" @click="subMenu.action">{{subMenu.text}}</li>
          </ul>
        </li>
      </ul> -->
      <!-- <span style="color: green;">当前登录：{{currUser.mobile}}</span>  
      <span style="color: green;" v-show="currUser.userName">使用v-show:{{currUser.realName}}</span> -->
    <!-- </div> -->
    <!-- 菜单栏结束 -->
  </header>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import { getCache, removeCache } from "@/utils/cache";
  import { CacheToken } from "@/constants/cacheKey";


  const menuList = [ // 设置下拉列表数据和对应的点击事件
          {id: 1, text: '首 页', hasChild: false, action: '/index'},
          {id: 2, text: '所有分类', hasChild: false, action: '/product/category', children: []},
        ]
  //登录后出现的菜单
  const userMenu = [
          {id: 6, text: '购物车', hasChild: false, action: 'this.cart'},
          {id: 7, text: '我的订单', hasChild: false, action: 'this.myOrder'},
          {id: 7, text: '我的收藏', hasChild: false, action: 'this.myFav'},
          {id: 8, text: '个人中心', hasChild: true, action: 'this.profile', children:[]},
        ]

  const router = useRouter();
  let currUser = reactive({});

  /**
   * 初始化
   */
  const onInit = () => {
    const userInfo = getCache(CacheToken);
    currUser = userInfo;
    console.log('登录用户：', userInfo)
  };

  /**
   * 退出登录
   */
  const logout = () => {
    removeCache(CacheToken);
    router.replace("/index");
  };

  /**
   * 菜单选择
   * @param key 路由
   */
  const handleSelect = (key: string) => {
    router.push(key);
  };

  // 如果一个数字则在前面添加0
  const getNum = (num: number) => {
    return num < 10 ? "0" + num : num;
  };

  onMounted(() => {
    onInit();
  });

</script>
<style scoped>
body, html{
  padding: 0;
  margin: 0;
}
.h-content{
  width: 100%;
}
.h-content{
  max-width: 820px;
  margin: 0 auto;
}
.menu-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.menu-list .menu-li{
  display: inline-block;
  padding: 5px 20px;
  line-height: 45px;
  font-size: 16px;
  position: relative;
  color: #fff;
}
.menu-list .menu-li:hover{
  background-color: #fff;
  color: #333;
  cursor: pointer;
}
.menu-list .menu-logo{
  width: 160px;
  height: 45px;
}
.zui-header{
  background-color: #00aeec;
  height: auto;
}
.zui-header .zui-logo{
  width: 280px;
  height: 55px;
  vertical-align: middle;
  float: left;
  margin: 4px 0 0;
}
.sub-menu{
  display: none;
  list-style: none;
  position: absolute;
  top: 50px;
  background-color: #fff;
  color: #006dd9;
  width: 122px;
  left: 0;
  padding: 0;
  z-index: 99999;
}
.sub-menu .sub-item:hover{
  background-color: #1ea5a3;
  color: #fff;
}
.sub-menu .sub-item{
  padding: 0 20px;
  line-height: 50px;
  font-size: 16px;
  border-top: none;
}
.menu-list .menu-li:hover .sub-menu{
  display: block;
}
.top-bar{
  max-width: 1024px;
  margin: 0 auto;
}
.top-bar .logo{
  background-image: url('../assets/img/head-logo.png');
  background-size: contain;
  background-position: center;
  height: 52px;
  width: 110px;
  background-repeat: no-repeat;
  float: left;
}
.top-bar .search-bar{
  width: 350px;
  float: right;
  position: relative;
}
.search-bar .search-ipt{
  height: 35px;
  width: 280px;
  border-radius: 25px;
  margin-top: 10px;
  border: 1px solid #1ea5a3;
  padding: 0 12px;
}
.search-bar .search-button{
  position: absolute;
  right: 48px;
  top: 12px;
  background: #e2a388;
  color: #fff;
  font-weight: bold;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.top-bar .user-login{
  float: right;
  /* width: 200px; */
  margin-top: 10px;
  font-size: 14px;
}
.user-login li{
  display: inline-block;
  min-width: 45px;
  text-align: center;
  cursor: pointer;
  line-height: 35px;
  height: 35px;
  margin: 0 5px;
  font-size: 14px;
  color: #e2e2e2;
}
.user-login li:hover{
  color: #e2a388;
}
</style>
